<template>
  <div class="learning-resources">
    <div class="resources-header">
      <h2>学习资源中心</h2>
      <p>精选优质学习资源，助力您的职业发展</p>
    </div>

    <div class="resources-content">
      <!-- 搜索和筛选 -->
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="搜索学习资源..."
          class="search-input"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="selectedCategory" placeholder="资源分类" @change="handleCategoryChange">
          <el-option label="全部" value="" />
          <el-option label="视频教程" value="video" />
          <el-option label="技术文档" value="doc" />
          <el-option label="实战项目" value="project" />
          <el-option label="电子书籍" value="book" />
          <el-option label="在线课程" value="course" />
        </el-select>
      </div>

      <!-- 推荐资源 -->
      <div class="recommended-section">
        <h3>推荐资源</h3>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in recommendedResources" :key="item.id">
            <div class="carousel-content" @click="viewResource(item)">
              <img :src="item.cover" :alt="item.title">
              <div class="carousel-info">
                <h4>{{ item.title }}</h4>
                <p>{{ item.description }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 资源列表 -->
      <div class="resources-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="resource in filteredResources" :key="resource.id">
            <el-card class="resource-card" :body-style="{ padding: '0px' }">
              <img :src="resource.cover" class="resource-image">
              <div class="resource-info">
                <div class="resource-header">
                  <h4>{{ resource.title }}</h4>
                  <el-tag :type="getResourceTypeTag(resource.type)">{{ resource.type }}</el-tag>
                </div>
                <p class="resource-desc">{{ resource.description }}</p>
                <div class="resource-meta">
                  <span><el-icon><User /></el-icon> {{ resource.author }}</span>
                  <span><el-icon><View /></el-icon> {{ resource.views }}</span>
                  <span><el-icon><Star /></el-icon> {{ resource.rating }}</span>
                </div>
                <div class="resource-actions">
                  <el-button type="primary" @click="viewResource(resource)">查看详情</el-button>
                  <el-button 
                    :type="resource.isFavorite ? 'success' : 'default'"
                    @click="toggleFavorite(resource)"
                  >
                    <el-icon><Star /></el-icon>
                    {{ resource.isFavorite ? '已收藏' : '收藏' }}
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalResources"
          :page-sizes="[9, 18, 27, 36]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 资源详情对话框 -->
    <el-dialog
      v-model="resourceDialogVisible"
      :title="selectedResource?.title"
      width="70%"
    >
      <div v-if="selectedResource" class="resource-detail">
        <div class="detail-header">
          <img :src="selectedResource.cover" class="detail-cover">
          <div class="detail-info">
            <h3>{{ selectedResource.title }}</h3>
            <p>{{ selectedResource.description }}</p>
            <div class="detail-meta">
              <el-tag>{{ selectedResource.type }}</el-tag>
              <span>作者：{{ selectedResource.author }}</span>
              <span>更新时间：{{ selectedResource.updateTime }}</span>
            </div>
          </div>
        </div>
        <div class="detail-content">
          <el-tabs>
            <el-tab-pane label="资源介绍">
              <div v-html="selectedResource.content"></div>
            </el-tab-pane>
            <el-tab-pane label="学习路径">
              <el-steps direction="vertical">
                <el-step 
                  v-for="(step, index) in selectedResource.learningPath" 
                  :key="index"
                  :title="step.title"
                  :description="step.description"
                />
              </el-steps>
            </el-tab-pane>
            <el-tab-pane label="相关资源">
              <el-row :gutter="20">
                <el-col :span="8" v-for="related in selectedResource.relatedResources" :key="related.id">
                  <el-card class="related-card" @click="viewResource(related)">
                    <img :src="related.cover" class="related-image">
                    <h5>{{ related.title }}</h5>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search, User, View, Star } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索和筛选
const searchQuery = ref('')
const selectedCategory = ref('')
const currentPage = ref(1)
const pageSize = ref(9)
const totalResources = ref(100)

// 资源数据
const resources = ref([
  {
    id: 1,
    title: 'Vue3 完全指南',
    description: '从入门到精通的Vue3教程，包含组合式API、响应式系统等核心概念',
    type: '视频教程',
    cover: 'https://placeholder.com/300x200',
    author: '张老师',
    views: 1234,
    rating: 4.8,
    isFavorite: false,
    updateTime: '2024-03-15',
    content: '详细的课程内容...',
    learningPath: [
      { title: 'Vue3基础', description: '了解Vue3的基本概念和特性' },
      { title: '组合式API', description: '学习Vue3的组合式API使用方法' },
      { title: '响应式系统', description: '深入理解Vue3的响应式原理' }
    ],
    relatedResources: [
      { id: 2, title: 'Vue3实战项目', cover: 'https://placeholder.com/150x100' },
      { id: 3, title: 'Vue3性能优化', cover: 'https://placeholder.com/150x100' }
    ]
  },
  // 更多资源...
])

// 推荐资源
const recommendedResources = ref([
  {
    id: 1,
    title: '前端架构师成长之路',
    description: '系统化的前端架构师培养课程',
    cover: 'https://placeholder.com/800x400'
  },
  // 更多推荐...
])

// 计算属性
const filteredResources = computed(() => {
  let result = resources.value
  if (searchQuery.value) {
    result = result.filter(resource => 
      resource.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      resource.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  if (selectedCategory.value) {
    result = result.filter(resource => resource.type === selectedCategory.value)
  }
  return result
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
  // 这里可以调用后端API进行搜索
}

const handleCategoryChange = () => {
  currentPage.value = 1
  // 这里可以调用后端API获取分类资源
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 这里可以调用后端API获取新的分页数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 这里可以调用后端API获取新的分页数据
}

const getResourceTypeTag = (type) => {
  const types = {
    '视频教程': 'success',
    '技术文档': 'info',
    '实战项目': 'warning',
    '电子书籍': 'danger',
    '在线课程': 'primary'
  }
  return types[type] || 'default'
}

// 资源详情
const resourceDialogVisible = ref(false)
const selectedResource = ref(null)

const viewResource = (resource) => {
  selectedResource.value = resource
  resourceDialogVisible.value = true
}

const toggleFavorite = (resource) => {
  resource.isFavorite = !resource.isFavorite
  ElMessage.success(resource.isFavorite ? '收藏成功' : '已取消收藏')
  // 这里可以调用后端API更新收藏状态
}
</script>

<style scoped>
.learning-resources {
  padding: 20px;
}

.resources-header {
  text-align: center;
  margin-bottom: 30px;
}

.resources-header h2 {
  margin-bottom: 10px;
  color: #303133;
}

.resources-header p {
  color: #606266;
}

.search-section {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.search-input {
  width: 300px;
}

.recommended-section {
  margin-bottom: 30px;
}

.carousel-content {
  height: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.carousel-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
}

.resource-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.resource-card:hover {
  transform: translateY(-5px);
}

.resource-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.resource-info {
  padding: 14px;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.resource-header h4 {
  margin: 0;
  flex: 1;
}

.resource-desc {
  color: #606266;
  margin: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-meta {
  display: flex;
  gap: 15px;
  color: #909399;
  margin: 10px 0;
}

.resource-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.pagination-section {
  margin-top: 20px;
  text-align: center;
}

.resource-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-cover {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.detail-info {
  flex: 1;
}

.detail-meta {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.related-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.related-card:hover {
  transform: translateY(-5px);
}

.related-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
</style> 